import { createRouter, createWebHistory } from "vue-router";

// import命令(es6的模块化的导入的方式)，是同步的
// import Home from "../pages/home/Index.vue";
// import Login from "../pages/login/Index.vue";
// import NotFound from "../pages/notfound/Index.vue";

// es6加了一个import函数,异步引入
// 可以做组件的异步加载(懒加载)

const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/home",
    component: () => import("../pages/home/Index.vue"),
    meta: { requireLogin: true },
    children: [
      {
        path: "/home",
        redirect: "/home/main",
      },
      {
        path: "/home/main",
        component: () => import("../pages/home/main/Index.vue"),
        // 路由元信息
        // 里面写对象，对象里面自由发挥
        // meta: { requireLogin: true },
        meta: { title: "系统首页" },
      },
      {
        path: "/home/bannerlist",
        component: () => import("../pages/home/bannerlist/Index.vue"),
        meta: { title: "轮播图列表" },
      },
      {
        path: "/home/banneradd",
        component: () => import("../pages/home/banneradd/Index.vue"),
        meta: { title: "添加轮播图" },
      },
      {
        path: "/home/project",
        component: () => import("../pages/home/project/Index.vue"),
        // meta: { requireLogin: true },
      },
      {
        path: "/home/userlist",
        component: () => import("../pages/home/userlist/Index.vue"),
      },
      {
        path: "/home/useradmin",
        component: () => import("../pages/home/useradmin/Index.vue"),
      },
      {
        path: "/home/echarts",
        component: () => import("../pages/home/echarts/Index.vue"),
      },
      {
        path: "/home/editor",
        component: () => import("../pages/home/editor/Index.vue"),
      },
      {
        path: "/home/md",
        component: () => import("../pages/home/markdown/Index.vue"),
      },
      {
        path: "/home/export",
        component: () => import("../pages/home/export/Index.vue"),
      },
      {
        path: "/home/import",
        component: () => import("../pages/home/import/Index.vue"),
      },
      {
        path: "/home/map",
        component: () => import("../pages/home/map/Index.vue"),
      },
    ],
  },
  {
    path: "/login",
    component: () => import("../pages/login/Index.vue"),
    // beforeEnter路由独享守卫，用法和全局前置守卫完全相同
    // beforeEnter: (to, from, next) => {
    //   console.log("111", to);
    //   next();
    // },
  },
  // 404页面
  // 有的项目会当地址没匹配的时候，做重定向
  {
    path: "/:pathMatch(.*)*",
    component: () => import("../pages/notfound/Index.vue"),
    // redirect: "/login",
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { top: 0 };

    // 当前进或者后退的时候，可以保留原来页面的滚动条位置
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// 全局前置守卫
// 会在路由发生改变的就会触发
// beforeEach触发时机是在页面进入之前
router.beforeEach((to, from, next) => {
  // to表示要去的那个页面的路由信息
  // from表示来的那个页面的路由信息
  // console.log(to);
  // console.log(from);

  // next()直接调用，相当于放行
  // next(false) 表示不放行
  // next("/login") 表示重定向
  // next();

  // 路由鉴权
  if (to.meta.requireLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }

  // if (to.meta.key) {
  //   if (JSON.parse(localStorage.getItem("keys")).includes(to.meta.key)) {
  //     next();
  //   } else {
  //     next("/login");
  //   }
  // } else {
  //   next();
  // }
});

// beforeResolve全局解析守卫
// 语法和功能都和beforeEach全局前置守卫几乎一样
// 可以写异步，触发时机会比beforeEach稍微慢一点
// router.beforeResolve((to, from, next) => {});

// 全局后置钩子
// 只要路由发生改变也会执行
// 会在页面跳进去再调用，没有next参数
router.afterEach((to, from) => {
  // 修改页面标题
  document.title = to.meta.title || "嗨购后台系统";
});

export default router;
